<template>
    <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
    import echarts from 'echarts';
    export default {
        props: {
            className: {
                type: String,
                default: 'chart'
            },
            width: {
                type: String,
                default: '100%'
            },
            height: {
                type: String,
                default: '250px'
            },
            chartData: {
                type: Object,
                required: true
            }
        },
        data() {
            return {
                chart: null,
                wash_num:[151, 234, 390, 280, 310, 185, 151, 132, ],
                barWidth:20
            }
        },
        watch: {
            chartData: {
                deep: true,
                handler(val) {
                    this.setOptions(val)
                }
            }
        },
        mounted() {
            this.$nextTick(() => {
                this.initChart()
            })
        },
        beforeDestroy() {
            if (!this.chart) {
                return
            }
            this.chart.dispose()
            this.chart = null
        },
        methods: {
            initChart() {
                this.chart = echarts.init(this.$el, 'macarons')
                this.setOptions(this.chartData)
            },
            setOptions({expectedData, actualData} = {}) {
                this.chart.setOption({
                    xAxis: {
                        data: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'none']
                    },
                    yAxis: {

                    },
                    tooltip: {
                        trigger: 'item', // 触发类型，默认数据触发，见下图，可选为：'item' ¦ 'axis'
                        showDelay: 20, // 显示延迟，添加显示延迟可以避免频繁切换，单位ms
                        hideDelay: 100, // 隐藏延迟，单位ms
                        transitionDuration: 0.4, // 动画变换时间，单位s
                        backgroundColor: 'rgba(0,0,0,0.7)', // 提示背景颜色，默认为透明度为0.7的黑色
                        borderColor: '#333', // 提示边框颜色
                        borderRadius: 4, // 提示边框圆角，单位px，默认为4
                        borderWidth: 0, // 提示边框线宽，单位px，默认为0（无边框）
                        padding: 5, // 提示内边距，单位px，默认各方向内边距为5，
                        // 接受数组分别设定上右下左边距，同css
                        axisPointer: { // 坐标轴指示器，坐标轴触发有效
                            type: 'line', // 默认为直线，可选为：'line' | 'shadow'
                            lineStyle: { // 直线指示器样式设置
                                color: '#E6BE1E',
                                width: 2,
                                type: 'solid'
                            },
                            shadowStyle: { // 阴影指示器样式设置
                                width: 'auto', // 阴影大小
                                color: 'rgba(150,150,150,0.3)' // 阴影颜色
                            }
                        },
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    hoverAnimation: true,
                    animation: true,
                    animationDuration: 2000,

                    legend: {
                        data: ['expected', 'actual']
                    },
                    series: [
                        {
                            z: 1,
                            type: 'bar',
                            barWidth: this.barWidth,
                            hoverAnimation: true, // 对 data 中所有数据项生效。
                            data: this.wash_num,
                            itemStyle: {
                                normal: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        x2: 1,
                                        y: 0,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0,
                                            color: '#2CBCA5'
                                        }, {
                                            offset: 0.5,
                                            color: '#2CBCA5'
                                        }, {
                                            offset: 0.5,
                                            color: '#2CBCA5'
                                        }, {
                                            offset: 1,
                                            color: '#2CBCA5'
                                        }]
                                    }
                                },
                            },
                            showBackground: true,
                            backgroundStyle: {
                                color: 'rgba(180, 180, 180, 0.2)'
                            }
                        },
                        {
                            z: 2,
                            type: 'pictorialBar',
                            data: [1, 1, 1, 1, 1, 1, 1, 1],
                            symbol: 'diamond',
                            symbolOffset: [0, '50%'],
                            symbolSize: [this.barWidth, 10],
                            itemStyle: {
                                normal: {
                                    color: {
                                        type: 'linear',
                                        x: 0,
                                        x2: 1,
                                        y: 0,
                                        y2: 0,
                                        colorStops: [{
                                            offset: 0,
                                            color: '#2CBCA5'
                                        }, {
                                            offset: 0.5,
                                            color: '#2CBCA5'
                                        }, {
                                            offset: 0.5,
                                            color: '#18998B'
                                        }, {
                                            offset: 1,
                                            color: '#18998B'
                                        }]
                                    }
                                },
                            },
                        },
                        {
                            z: 3,
                            type: 'pictorialBar',
                            symbolPosition: 'end',
                            data: this.wash_num,
                            symbol: 'diamond',
                            symbolOffset: [0, '-50%'],
                            symbolSize: [this.barWidth, 10 * (this.barWidth) / this.barWidth],
                            itemStyle: {
                                normal: {
                                    borderColor: '#5AADE8',
                                    borderWidth: 2,
                                    color: '#35CAB8'
                                },
                            }
                        }
                    ]
                });
            }
        }
    }
</script>
